<template>
  <div class="wrapper">
    <!-- 账号密码登录 -->
    <el-form :model="testFrom"  class="login-warp" v-show="loginType=='password'">
      <h3 class="title">管理员登录</h3>
      <el-form-item prop="name">
        <el-input type="text" v-model="testFrom.name" placeholder="请输入账号">
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" @keyup.enter.native="login">
        <el-input type="password" v-model="testFrom.password" placeholder="请输入密码">
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </el-form-item>
<!--      <div class="tip" @click="loginType='phone'">手机账号登录</div>-->
      <el-button type="primary" class="login-btn" :loading="logining" @click="login" >登录</el-button>
    </el-form>

    <!-- 验证码登录 -->
    <el-form  class="login-warp" v-show="loginType=='phone'" style="width:500px">
      <h3 class="title">登录</h3>
      <el-form-item prop="name">
        <el-input type="text" v-model="testFrom1.phone" placeholder="请输入手机号">
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" @keyup.enter.native="login1">
        <el-row>
          <el-col :span="18">
            <el-input type="text" v-model="testFrom1.code" placeholder="请输入验证码">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" style="margin-left:20px" :disabled="flag==false" @click="getCode"><span v-if="flag">获取验证码</span><span v-if="flag==false">{{time}}s</span></el-button>
          </el-col>

        </el-row>
      </el-form-item>
      <div class="tip" @click="loginType='password'">账号密码登录</div>
      <el-button type="primary" class="login-btn" :loading="logining" @click="login1" >登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data(){
    return {
      time:'',
      flag:true,
      loginType:'password',//phone区分登录方式
      logining: false,
      checked: false,
      testFrom:{
        name: '',
        password: ''
      },
      testFrom1:{
        phone:'',
        code:''
      }
    }
  },
  mounted(){
  },
  methods:{

    async login(){
      //账号密码登录
      let params = {
        username: this.testFrom.name,
        password: this.testFrom.password,
      }
      if(!this.testFrom.name || !this.testFrom.password){
        this.$message({
          message: '账号或者密码不能为空',
          type: 'warning'
        });
        return;
      }
      const res = await this.$api.adminSignIn(params)
      if(res.data.level=='success'){
        this.$message({
          message: res.data.message,
          type: 'success'
        });
        let user_token = res.data.data;
        window.localStorage.setItem('is_admin', 1);
        this.$store.dispatch('setUserToken', user_token)
        window.localStorage.setItem('user_token', user_token);
        this.getAdminUserInfo();
        this.$router.push({ path: '/home' })
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },

    async login1(){
      //验证码登录
      let params = {
        phone: this.testFrom1.phone,
        verify_phone: this.testFrom1.code,
      }
      if(!this.testFrom1.phone || !this.testFrom1.code){
        this.$message({
          message: '手机或者验证码不能为空',
          type: 'warning'
        });
        return;
      }
      const res = await this.$api.userAdminLogin(params)
      if(res.data.level=='success'){
        this.$message({
          message: res.data.message,
          type: 'success'
        });
        let user_token = res.data.data;
        this.$store.dispatch('setUserToken', user_token);
        window.localStorage.setItem('user_token', user_token);
        window.localStorage.setItem('last_time', res.data.last_time);
        window.localStorage.setItem('is_admin', 0);
        this.getUserInfo();
        this.$router.push({ path: '/home' })
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },

    //获取管理员信息
    async getAdminUserInfo(){
      let params = {
        user_token: window.localStorage.getItem('user_token'),
      }
      const res = await this.$api.getAdminUserInfo(params);
      if(res.data.level=='success'){
        window.localStorage.setItem('user_name', res.data.data.username);
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },
    //获取用户信息
    async getUserInfo(){
      let params = {
        user_token: window.localStorage.getItem('user_token')
      }
      const res = await this.$api.getUserDetail(params)
      if(res.data.level=='success'){
        if (res.data.data.is_unit_auth==1) {
          window.localStorage.setItem('unit_id', res.data.data.unit_info.id)
        }else {
          window.localStorage.setItem('unit_id', '')
        }
        window.localStorage.setItem('user_name', res.data.data.realname?res.data.data.realname:res.data.data.nickname);
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },
    async getCode(){
      if(this.testFrom1.phone==''){
        this.$message({
          message: '手机号不能为空',
          type: 'warning'
        });
        return
      }
      let res=await this.$api.getCode({
        phone:this.testFrom1.phone
      })
      this.$message({
          message: res.data.message,
          type: 'success'
        });
      if(res.data.level=='success'){
        this.flag=false;
        this.time=60;
        this.timeInterval=setInterval(()=>{
          this.time--;
          if(this.time<0){
            this.time="";
            this.flag=true;
            clearInterval(this.timeInterval)
          }
        },1000)
      }
    },

  }
}
</script>
<style lang='scss' scoped>
.tip{
  cursor: pointer;
}
.wrapper{
    background:url('../../../static/images/loginbg.jpg');
    background-size:100%;
    top:0;
    left:0;
    right: 0;
    bottom:0;
    position: absolute;
}
 .login-warp{
  width: 350px;
  height: 300px;
  padding: 20px 40px;
  margin: 180px auto;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  box-shadow: 0 0 25px #000;
    .title{
      width: 100%;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      text-align: center;
      margin-bottom: 30px;
      color: #666666;
    }
    .login-btn{
      width: 100%;
      margin-top: 20px;
    }
  }
</style>

<style>
.el-form-item.is-success .el-input__inner{
  background-image: none;
  border-color: #e9e9e9;
  box-sizing: border-box;
  color: #1f2d3d;
  font-size: inherit;
  outline: 0;
  transition: border-color .2s
}

.el-form-item.is-success .el-input__inner:hover {
  border: 1px solid #bfcbd9;
}

.el-form-item.is-success .el-input__inner:focus{
    border-color: #42a5f5;
}

</style>
